<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">选择模板:</p>
			</el-col>
			<el-col :span="6">
				<el-select size="small" v-model="upData.schemeId" clearable placeholder="请选择上传模板" @change="tempChange">
					<el-option v-for="item in templateCombo" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="5" style="padding-left: 2px">
				<div v-if="upData.schemeId != '' " style="clear: both;float: left">
					<el-upload :action="action" :data="upData" name="upExecl" :on-progress="process" :on-error="error" :on-success="success">
						<el-button size="small" type="primary">点击上传</el-button>
						<span slot="tip">只能上传xlsx文件</span>
					</el-upload>
				</div>
			</el-col>
			<el-col :span="12" style="text-align: right;margin-left: -10px;">
				<el-button type="primary" size="small" @click="saveCar">批量确认</el-button>
				<el-button type="primary" size="small" @click="saveAll">全部确认</el-button>
				<el-button size="small" type="primary" @click="delCheck">批量删除</el-button>
				<el-button size="small" type="primary" @click="delAll">全部删除</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-table :data="tableData.dataList" stripe border @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55" label="选择" fixed>
					</el-table-column>
					<el-table-column prop="vin" label="VIN" width="180">
					</el-table-column>
					<el-table-column prop="estimatePrice" label="暂估价格" width="100">
					</el-table-column>
					<!--<el-table-column prop="purchaseDate" label="采购日期" width="120" :formatter="caiGouTime">
					</el-table-column>-->
					<el-table-column prop="purchaseDate1" label="采购日期" width="120" >
					</el-table-column>
					<el-table-column prop="purchaseNum" label="采购单号" width="100">
					</el-table-column>
					<el-table-column prop="carSeries" label="车系名称" width="120">
					</el-table-column>
					<el-table-column prop="carModelCode" label="车型代码" width="100">
					</el-table-column>
					<el-table-column prop="modelName" label="车型名称" width="100">
					</el-table-column>
					<el-table-column prop="configureCode" label="配置代码" width="120">
					</el-table-column>
					<el-table-column prop="configureName" label="配置名称" width="100">
					</el-table-column>
					<el-table-column prop="carModelYear" label="车型年" width="100">
					</el-table-column>
					<el-table-column prop="appearanceCode" label="外观代码" width="100">
					</el-table-column>
					<el-table-column prop="appearanceName" label="外观颜色" width="100">
					</el-table-column>
					<el-table-column prop="trimCode" label="内饰代码" width="100">
					</el-table-column>
					<el-table-column prop="trimName" label="内饰名称" width="100">
					</el-table-column>
					<el-table-column prop="chooseCode" label="加装代码" width="100">
					</el-table-column>
					<el-table-column prop="chooseName" label="加装名称" width="100">
					</el-table-column>
					<!--<el-table-column prop="distributionDate" label="配货日期" width="120" :formatter="peiHuoTime">
					</el-table-column>-->
					<el-table-column prop="distributionDate" label="配货日期" width="120">
					</el-table-column>
					<!--<el-table-column prop="sendDate" label="发货日期" width="120" :formatter="faHuoTime">
					</el-table-column>-->
					<el-table-column prop="sendDate" label="发货日期" width="120" >
					</el-table-column>
					<el-table-column prop="oldNum" label="提单号" width="100">
					</el-table-column>
					<el-table-column prop="distributionStatus" label="配货状态" width="100">
					</el-table-column>
					<el-table-column prop="provideCompanyName" label="购货单位" width="100">
					</el-table-column>
					
				</el-table>
				<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>
		
		<el-dialog tittl="打印" v-model="printAftershows" id="dvData" size="tiny">
			<el-col :span="24">
				<el-table :data="dataListErr" stripe border >
					<el-table-column prop="vin" label="VIN" >
					</el-table-column>
					<el-table-column prop="type" label="未入库原因" width="200">
					</el-table-column>
			
				</el-table>
			</el-col>
		</el-dialog >
	</div>
</template>
<script>
	import moment from 'moment'
	export default {
		data: function() {
			return {
				action: this.API_ROOT + "/base/execl/upload",
				upData: {
					schemeId: '',
					uid: window.localStorage.getItem("uid"),
					token: window.localStorage.getItem("token")
				},
				// 存储 复选框 内容
				carSelect: [],
				printAftershows:false,
				//下拉列表数据
				templateCombo: [],
				loadingVue: null,
				/*--------------------------导入需要的数据-------------------------------*/
				//列表数据
				tableData: {
					total: 0,
					dataList: []
				},
				dataListErr:[],
				//页码数
				CurentPage: 1,
				//每页的数量
				page: this.page,

				/*-----------------------------导入需要的数据---------------------------------*/
			}
		},
		methods: {
			//每当 复选框发生变化 调用函数 进行更新 赋值
			handleSelectionChange: function(val) {
				this.$data.carSelect = val;
			},
	
			
			
			/*--------------------------导入需要的方法-------------------------------*/
			//列表，分页大小切换
			handleSizeChange: function() {},
			//列表,当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				this.impQuery();
			},
			//查询
			impQuery: function() {
				debugger;
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/scm/car/impPage',
					params: {
						start: this.$data.CurentPage,
						limit: this.$data.page.pageSize
					}
				}).then(function(resp) {
					//success
					resp.data.total = parseInt(resp.data.total);
					this.$data.tableData = resp.data;
				}, function(error) {
					// error
				})
			},
			/*--------------------------导入需要的方法-------------------------------*/
			process: function() {
				this.$data.loadingVue = this.$loading({
					fullscreen: true,
					text: "正在导入数据，请稍候"
				});
			},
			error: function(err, response) {
				this.$message.error(response.data.msg);
				this.$data.loadingVue.close();
			},
			success: function(response) {
				this.$data.loadingVue.close();

				if(response.success) {
					this.impQuery();
					this.$message(response.msg);
				} else {
					this.$message.error(response.msg);
				}

			},

			//查询方案下拉列表数据
			queryTemplateCombo: function() {
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/base/execl/combo',

				}).then(function(resp) {

					this.$data.templateCombo = resp.data;
				}, function(error) {
					// error
				})
			},
			tempChange: function(newValue) {
				window.localStorage.setItem("xbTemplate", newValue);
			},
			//批量处理 保存传递 carSelect 这个数组
			saveCar: function() {
				if(this.$data.carSelect.length == 0) {
					this.$message.error("请选择数据！")
				} else {
					this.$http.post(this.API_ROOT + '/scm/car/impConfirms', this.$data.carSelect, {

						})
						.then(resp => {
							if(resp.data.success) {
								this.$message(resp.data.msg);
								this.impQuery(); //页面刷新
								if(resp.data.data.length==0){
									this.$message("全部导入成功！");
								}
								else{
									this.$data.printAftershows=true;
									this.$data.dataListErr=resp.data.data;
								}
							} else {
								this.$message.error(resp.data.msg);
							}
						}, resp => {

						})
				}
			},
			//批量处理 保存传递 carSelect 这个数组
			delCheck: function() {
				if(this.$data.carSelect.length == 0) {
					this.$message.error("请选择数据！")
				} else {
					this.$http.post(this.API_ROOT + '/scm/car/impDels', this.$data.carSelect, {

						})
						.then(resp => {
							if(resp.data.success) {
								this.$message(resp.data.msg);
								this.impQuery(); //页面刷新
							} else {
								this.$message.error(resp.data.msg);
							}
						}, resp => {

						})
				}
			},
			//全部保存
			saveAll: function() {
				this.$confirm('确认要全部导入这些数据吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//等待动画
					this.$data.loadingVue = this.$loading({
						fullscreen: false,
						text: "正在确认数据，请稍候"
					});
					this.$http.get(this.API_ROOT + '/scm/car/impConfirmAll', {
						params: {}
					}).then(resp => {
						if(resp.data.success) {
							this.$data.loadingVue.close();
							this.$message(resp.data.msg);
							this.impQuery();
							//this.$data.carFormShow = false;
							if(resp.data.data.length==0){
									this.$message("全部导入成功！");
								}
								else{
									this.$data.printAftershows=true;
									this.$data.dataListErr=resp.data.data;
								}
						} else {
							this.$message.error(resp.data.msg);
						}
					}, resp => {})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消此操作'
					});
				});

			},
			//全部删除
			delAll: function() {
				this.$confirm('确认要全部删除这些数据吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//等待动画
					this.$data.loadingVue = this.$loading({
						fullscreen: false,
						text: "正在删除数据，请稍候"
					});
					this.$http.get(this.API_ROOT + '/scm/car/impDelAll', {
						params: {}
					}).then(resp => {
						if(resp.data.success) {
							this.$data.loadingVue.close();
							this.$message(resp.data.msg);
							this.impQuery();
							//this.$data.carFormShow = false;
						} else {
							this.$message.error(resp.data.msg);
						}
					}, resp => {})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消此操作'
					});
				});

			},
			//时间判断为空的封装
			momentFu: function(dt) {
				if(dt == '' || dt == null || dt == undefined) {
					return "";
				} else {
					return this.moment(Number(dt)).format("YYYY-MM-DD");
				}
			},
			//配货时间戳转换
			peiHuoTime: function(row, column) {
				return this.momentFu(row.distributionDate);
				debugger;
			},
			//发货时间戳转换
			faHuoTime: function(row, column) {
				return this.momentFu(row.sendDate);
				debugger;
			},
			//采购时间戳转换
			caiGouTime: function(row, column) {
				return this.momentFu(row.purchaseDate);
				debugger;
			},
			
		},
		created: function() {
			/*--------------------------导入需要的方法-------------------------------*/
			//加载列表
			this.impQuery();
			/*--------------------------导入需要的方法-------------------------------*/
			//获取方案下拉列表
			this.queryTemplateCombo();
			var temp = window.localStorage.getItem("xbTemplate");
			if(temp && temp != null && temp.length > 10) {
				this.$data.upData.schemeId = temp;
			}
		},
		/*---------------增加 批量处理按钮-开始  保险导入界面----------------------------*/

		/*---------------增加 批量处理按钮-结束---------------------------*/
	}
</script>
<style>
	.el-upload {
		clear: both;
	}
</style>